<script setup lang="ts">
import { useSocketStore } from "~/store/useSocket";
import defaultAvatar from "~/assets/app-mj.png";
import { useUserStore } from "~/store/useUser";
import { computed, ref } from "vue";
import { CloseBold } from "@element-plus/icons-vue";

const emits = defineEmits(["sendGoods", "closeSendGoods"]);
const userid = ref(1);
const props = defineProps({
  msg: {
    type: Object,
    default: {},
  },
});
const socketStore = useSocketStore();
const userStore = useUserStore();
const currentImKey = computed(() => socketStore.currentImKey);
const userInfo = computed(() => userStore.getUserInfo);

// 头像
const headSrc = computed(() => {
  if (isMine.value && userStore.getUserInfo.avatar) {
    return userStore.getUserInfo.avatar;
  }
  if (!isMine.value && props.msg.fromAvatar) {
    return props.msg.fromAvatar;
  }
  return defaultAvatar;
});
// 是不是自己的消息
const isMine = computed(() => {
  return props.msg.from === userInfo.value.uimKey;
});
// 发送服务
const sendGoods = () => {
  const baseGoodsInfo = props.msg.exData.goodsInfo;
  if (baseGoodsInfo && baseGoodsInfo.id) {
    socketStore.sendMessage(
      "chatMsg",
      {
        to: currentImKey.value,
        content: "分享服务",
        contentType: 8,
        exData: {
          id: baseGoodsInfo.id,
          coverPic: baseGoodsInfo.coverPic[0],
          goodsName: baseGoodsInfo.goodsName,
          goodsAmount: props.msg.exData.trialVersion.goodsAmount,
          versionType: props.msg.exData.trialVersion.versionType,
        },
      },
      (res) => {
        console.log("分享给当前聊天窗口 res", res);
        emits("sendGoods", res);
      }
    );
  }
};
// 关闭发送服务
const closeSendGoods = () => {
  emits("closeSendGoods");
};
</script>

<template>
  <div class="text-msg">
    <div class="msg-text">
      <p class="name">
        <span>刚刚浏览的服务</span>
        <el-icon class="close" @click="closeSendGoods"><CloseBold /></el-icon>
      </p>
      <div class="info" v-if="props.msg.exData.goodsInfo">
        <img :src="props.msg.exData.goodsInfo.coverPic[0]" alt="" />
        <div class="info-text">
          <p class="goods-name">
            {{ props.msg.exData.goodsInfo.goodsName }}
            <span class="version" v-if="props.msg.exData && props.msg.exData.trialVersion"
              >({{
                props.msg.exData.trialVersion.versionType === 1 ? "标准版" : "体验版"
              }})
            </span>
          </p>
          <p class="send">
            <span class="price" v-if="props.msg.exData && props.msg.exData.trialVersion"
              ><span>¥</span>{{ props.msg.exData.trialVersion.goodsAmount }}</span
            >
            <span class="btn" @click="sendGoods">发送服务</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.text-msg {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}
.msg-text {
  width: 90%;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 12px 12px 12px 12px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 12px 16px;
  .name {
    font-weight: bold;
    color: #191e28;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    span {
      flex: 1;
    }
    .close {
      color: rgba(25, 30, 40, 0.32);
      width: 24px;
      height: 24px;
      cursor: pointer;
      &:hover {
        color: rgba(25, 30, 40, 0.64);
      }
    }
  }
}
.info {
  display: flex;
  align-items: center;
  img {
    width: 120px;
    height: 76px;
    margin-right: 12px;
    border-radius: 8px;
  }
  .info-text {
    flex: 1;
    .goods-name {
      font-size: 15px;
      color: #191e28;
      line-height: 24px;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 450px;
      margin-bottom: 20px;
      .version {
        font-size: 12px;
        font-weight: 300;
      }
    }
    .send {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        flex: 1;
        color: #ff4f4f;
        font-size: 22px;
        font-weight: bold;
        span {
          font-size: 14px;
        }
      }
      .btn {
        width: 80px;
        height: 32px;
        background: #1dbf73;
        border-radius: 8px 8px 8px 8px;
        text-align: center;
        line-height: 32px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
